<template>
    <div class="comparative-analysis">
        <ModalTitle title="案件数量对比分析" />
        <div class="progress">
            <div class="up" v-for="(item, index) in list" :key="index">
                <div class="name">{{ item.title }}</div>
                <div class="progre">
                    <p :style="{ width: item.progress }"></p>
                </div>
                <div class="value">{{ item.number }}</div>
            </div>
        </div>
    </div>
</template>

<script>
// 案件数量对比分析
import ModalTitle from '@components/ModalTitle/Index.vue'
import { ZhiNengHuaYingYongFenXi } from '@/api/zhangzi'
export default {
    components: { ModalTitle },
    data() {
        return {
            list: [{ title: '人工派遣案件总量', number: 0, progress: '0%' }, { title: '非人工派遣案件总量', number: 0, progress: '0%' }]
        }
    },
    created() {
        this.getNuberofButtons()
    },
    methods: {
        async getNuberofButtons() {
            const res = await ZhiNengHuaYingYongFenXi.NuberofButtonsAPI()
            console.log(res,'案件数量对比分析');
            if (res.success) {
                if (res.data.personCasesNum >= 0 && res.data.unPersonCasesNum >= 0) {
                    let TotalAll = Number(res.data.personCasesNum) + Number(res.data.unPersonCasesNum)
                    this.list[0].number = res.data.personCasesNum
                    this.list[0].progress = this.filterData(Number(res.data.personCasesNum), TotalAll)
                    this.list[1].number = res.data.unPersonCasesNum
                    this.list[1].progress = this.filterData(Number(res.data.unPersonCasesNum), TotalAll)
                }
            } else {
                this.$message.error(res.message)
            }
        },
        filterData(initNum, AllTotal) {
            return Number(initNum / AllTotal) * 100 + '%'
        }
    },
}
</script>

<style lang="less" scoped>
.comparative-analysis {
    width: 100%;
    height: 17.6rem;
    margin-bottom: 2rem;

    .progress {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 100%;
        height: calc(100% - 3.8rem - 1.5rem);
        margin-top: 1.5rem;
        overflow-y: auto;

        .up {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 100%;
            height: 1.6rem;

            .name {
                width: 12.6rem;
                height: 1.6rem;
                font-size: 1.4rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #EBEFF3;
                line-height: 1.6rem;
                margin-right: 1.5rem;
            }

            .progre {
                position: relative;
                flex: 1;
                height: 0.4rem;
                background: #07384C;
                opacity: 1;
                margin-right: 0.6rem;

                p {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 20%;
                    height: 100%;
                    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 1) 100%);

                    &::after {
                        content: '';
                        position: absolute;
                        top: -0.7rem;
                        right: -0.9rem;
                        width: 1.9rem;
                        height: 1.9rem;
                        border-radius: 50%;
                        background-image: url('../../../../assets/images/zhangzi/tongji/progress.png');
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }
                }
            }

            .value {
                height: 1.6rem;
                font-size: 1.6rem;
                font-family: SourceHanSansSC-Medium, SourceHanSansSC;
                font-weight: 500;
                color: #49FFFA;
                line-height: 1.6rem;
            }
        }
    }
}
</style>